<template>
	<div class="padding20">
		<el-row style="margin-bottom: 17px">
			<el-button
				type="primary"
				size="medium"
				v-if="$tools.hasPermission('system:menuManage:save')"
				@click="handleEdit()"
				icon="el-icon-plus"
			>
				添加
			</el-button>
		</el-row>
		<loading :show="parentShow">
			<el-table
				:data="tableData"
				style="width: 100%; margin-bottom: 20px"
				row-key="id"
				border
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			>
				<el-table-column prop="name" label="名称" :show-overflow-tooltip="true" width="250"></el-table-column>
				<el-table-column prop="type" label="类型" :formatter="typeFmt"></el-table-column>
				<el-table-column prop="icon" label="图标">
					<template slot-scope="scope">
						<svg-icon :icon-class="scope.row.icon" />
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序"></el-table-column>
				<el-table-column label="操作" fixed="right" min-width="180">
					<template slot-scope="scope">
						<el-button v-if="$tools.hasPermission('system:menuManage:info')" size="mini" @click="handleInfo(scope.row.id)">
							详情
						</el-button>
						<el-button v-if="$tools.hasPermission('system:menuManage:edit')" size="mini" @click="handleEdit(scope.row.id)">
							编辑
						</el-button>
						<el-button
							v-if="$tools.hasPermission('system:menuManage:delete')"
							size="mini"
							type="danger"
							@click="handleDelete(scope.row)"
							plain
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</loading>
		<form-edit
			v-if="formEditVisible"
			ref="formEdit"
			:menuTypeList="menuTypeList"
			:allMenu="tableData"
			@refreshData="queryMenuList"
		></form-edit>
		<form-info v-if="formInfoVisible" ref="formInfo"></form-info>
	</div>
</template>
<script>
import { optMenuList, menuDel } from "@/api/system/menu.js"
import { enumList } from "@/api/public.api.js"
import FormEdit from "./systemmenu-edit"
import FormInfo from "./systemmenu-info"
export default {
	data() {
		return {
			parentShow: "",
			tableData: [],
			formEditVisible: false,
			formInfoVisible: false,
			menuTypeList: [],
		}
	},
	components: {
		"form-edit": FormEdit,
		FormInfo,
	},
	activated() {
		this.tableData = []
		this.queryMenuList()
	},
	created() {
		this.queryMenuTypeList()
		this.queryMenuList()
	},
	methods: {
		//查询菜单类型
		queryMenuTypeList() {
			enumList("MenuType").then(resp => {
				if (resp.code == 0) {
					this.menuTypeList = resp.data
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		//查询菜单列表
		queryMenuList() {
			this.parentShow = true
			optMenuList().then(resp => {
				if (resp.code == 0) {
					setTimeout(() => {
						this.parentShow = false
						this.tableData = resp.data
					}, 600)
				} else {
					this.parentShow = false
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		// 菜单类型格式化
		typeFmt(row) {
			let typeName = ""
			this.menuTypeList.forEach(item => {
				if (row.type == item.code) {
					typeName = item.name
				}
			})
			return typeName
		},
		//图标格式化
		iconFmt(row) {
			return <span class={row.icon}></span>
		},
		//打开编辑窗口
		handleEdit(id) {
			this.formEditVisible = true
			this.$nextTick(() => {
				this.$refs.formEdit.init(id)
			})
		},

		//删除
		handleDelete(row) {
			this.$confirm("确认删除该记录, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				menuDel(row.id).then(resp => {
					if (resp.code == 0) {
						this.$message({
							type: "success",
							message: "操作成功!",
						})
						this.queryMenuList()
					} else {
						this.$msg({
							message: resp.msg,
							type: "error",
						})
					}
				})
			})
		},
		//查看详情
		handleInfo(id) {
			this.formInfoVisible = true
			this.$nextTick(() => {
				this.$refs.formInfo.init(id)
			})
		},
	},
}
</script>
<style scoped></style>
